<template>
	<el-form ref="form" :model="form" :rules="rules" label-width="80px" >
		<el-form-item label="景区名称" prop="name">
		 <el-col :span="12">
	      <el-input v-model=" form.name" ></el-input>
	     </el-col>
	    </el-form-item>
    <el-form-item label="经纬度" required>
     <el-col :span="4">  
	    <el-form-item prop="longitude">
		   	   <el-input v-model.number=" form.longitude"  placeholder="输入经度"></el-input>
	    </el-form-item>
     </el-col> 
       <el-col class="line" :span="2">-</el-col>
      <el-col :span="4"> 
       <el-form-item prop="latitude">
            <el-input v-model.number=" form.latitude"  placeholder="输入维度"></el-input>
       </el-form-item>
      </el-col>
     </el-form-item> 
	    <el-form-item label="标签" prop="tag">
		 <el-col :span="12">
	      <el-input v-model=" form.tag"></el-input>
	     </el-col>
	    </el-form-item>
    </el-form-item>  
	    <el-upload
		  action="https://jsonplaceholder.typicode.com/posts/"
		  list-type="picture-card"
		  :on-preview="handlePictureCardPreview"
		  :on-remove="handleRemove"
		  :limit="3"
		  :on-exceed="handleExceed"
          :on-success="handleAvatarSuccess"
		  >
		  <i class="el-icon-plus"></i>
       </el-upload>
		<el-dialog :visible.sync="dialogVisible">
		  <img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
			<el-form-item class="sumbit">
			    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
			    <el-button @click="resetForm('form')">重置</el-button>
	       </el-form-item>
	</el-form>	
</template>
<script>
import axios from 'axios'
import qs from 'qs' 	
export default {
  // inject: ['name','reload','test'],
  name: 'regionForm',
  data(){
  	return{
  		 form: {
          name: '',
          longitude: '',
          latitude: '',
          tag: '',
          image: '',
        },
      dialogVisible: false,
      dialogImageUrl: [ ],
      errors: [],
      // name:'sad'
      rules: {
         name:[ {required: true, message: '请输入景区名称', trigger: 'blur'} ],
          longitude:[
             {required: true, message: '请输入经度', trigger: 'blur'},
             { type: 'number', message: '请输入数字'}
             // {min: 0, max: 180, message: '输入的经度不在范围内', trigger: 'blur'}
          ],
          latitude:[
             {required: true, message: '请输入维度', trigger: 'blur'},
             { type: 'number', message: '请输入数字'}
             // {min: 0, max: 90, message: '输入的维度不在范围内', trigger: 'blur'}
          ],
          tag:[{required: true, message: '请输入标签', trigger: 'blur'}]
        }

      }
  	   },
  	 methods: {
    //    handleCanel(){
    //   this.form={}
    // },
    handleRemove(file, fileList) {
      },
      handleAvatarSuccess(res, file) {
      console.log(file)
      this.form.image=this.form.image+file.url+ " ;"
      },
      handlePictureCardPreview(file) {
      	console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true;
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        this.dialogVisible = false
      },
       onSubmit(e) {
        console.log('表单认证',e)
         this.$refs[e].validate((valid) => {
          console.log('valid',valid)
          if (valid) {
              this.handlePostRegion(e)
           }else{
             alert('请按要求填写')
             return false
           }
        })
      console.log('list',this.Region)
      
      // this.Region.name= ' '
      // this.Region.longitude= ' '
      // this.Region.latitude= ' '
      // this.Region.tag= ' '
      // this.dialogImageUrl= [ ]
      // console.log(this.name)
      },
      getListInfoSucc ( res ) { 
      console.log(res)
    },
      handlePostRegion(e){
        var qs = require('qs')
      axios.post('/api/add', qs.stringify(this.form)).then(function(res) {
           console.log(res)
           if (res.data=='success') {
            alert("添加成功")
            location.reload()
           }else{
             alert("添加失敗")
           }
           // this.reload()

      })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }


</script>
<style>
   .sumbit{
   	margin: 10px;
   }

	 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>